/*
Author:kermit
Email:455196886@qq.com
Company:http://dragontrail.com/
Creattime:2017-1-08
*/

//依赖jquery
var Experience = function() {
	var  experience = this;
	experience.restaurantSwiperInit = false;
	experience.RestaurantSwiperInit = function(){
		var $restaurantSwiper = $('#restaurantSwiper'),
			$nextBtn = $restaurantSwiper.parent('.swiper-box').find('.restaurant-button-next'),
			$prevBtn = $restaurantSwiper.parent('.swiper-box').find('.restaurant-button-prev'),
			swiperLenght = $restaurantSwiper.find('.swiper-slide').lenght;
		experience.restaurantSwiper = new Swiper($restaurantSwiper, {
			loop:true,
			loopedSlides:swiperLenght,
			slidesPerView:3,
			prevButton:$prevBtn,
			nextButton:$nextBtn,
			breakpoints: {
				1024:{
			   		slidesPerView: 2,
			 	},
		   		768:{
		   	   		slidesPerView: 1,
		   	 	}
			}
		})
	}
	//打开团队详情
	experience.TeamDetailInit = function(){
		$('body').on('click','.team-item-trigger',function(){
	 		var $this = $(this);
	 		var itemData = {
	 			id:$this.data('id'),
	 			likedClass:$this.attr('likedClass'),
	 			disabled:$this.attr('likedClass')=='active'?'disabled':'',
	 			likecount:$this.data('likecount'),
	 			avatar:$this.data('avatar'),
	 			title:$this.data('title'),
	 			enname:$this.data('enname'),
	 			tags:$this.data('tags'),
	 			detail:$this.data('detail')
	 		}
	 		console.log('itemData',itemData)
	 		var cover_tpl = '<div class="team-cover">'+
								'<div class="team-cover-inner">'+
									'<div class="team-detail">'+
										'<button class="btn btn-close"><i class="iconfont icon-searchclose"></i></button>'+
										'<div class="sider-bar text-center">'+
											'<div class="avatar img-link"><img src="'+itemData.avatar+'" alt=""></div>'+
											'<div class="avatar-info">'+
												'<div class="thumb-box">'+
													'<button class="btn btn-thumb '+itemData.likedClass+'" data-likeid="'+itemData.id+'" data-role="shownum" '+itemData.disabled+'>'+
														'<i class="iconfont icon-fabulous"></i><span class="thumb-num">'+itemData.likecount+'</span>'+
													'</button>'+
												'</div>'+
												'<p class="zh-name text-red">'+itemData.title+'</p>'+
												'<p class="en-name text-red">'+itemData.enname+'</p>'+
												'<p class="tags">'+itemData.tags+'</p>'+
											'</div>'+
										'</div>'+
										'<div class="team-content">'+itemData.detail+'</div>'+
									'</div>'+
								'</div>'+
							'</div>';
			$('body').append(cover_tpl);
			$('html').addClass('un-scroll');
			$('.team-cover .btn-close').click(function(event) {
				$(this).parents('.team-cover').remove();
				$('html').removeClass('un-scroll');
			});
		});
	}
	//船舱幻灯片初始化
	experience.CabinSwiperInit = function(index,$div){
		var $pagination = $div.find('.swiper-pagination'),
			$cabinInfo = $div.siblings('.cabin-info'),
			cabinInfoHeight = $cabinInfo.outerHeight();
		if(Common.screenWidth<=1024){
			$div.height('auto');
		}else{
			$div.height(cabinInfoHeight);
		}
		// experience.cabinSwiper = new Swiper($div, {
		// 	pagination: $pagination,
		// 	paginationClickable :true,
		// })
	}
	//船舱
	experience.CabinInit = function(){
		//var $cabinSwiper = $('.cabin-swtichCont .item-show .cabin-swiper');
		var $cabinSwiper = $('.cabin-swtichCont .item-show .cabin-img');
		$cabinSwiper.each(function(index,$item){
			experience.CabinSwiperInit(index,$(this));
		})
	}
	//船舱切换
	experience.CabinSwitchInit = function(){
		$('body').on('click','.cabin-swtichNav span',function(){
			var $this = $(this),
				index = $this.index(),
				$swtichContItems = $(this).parent('.cabin-swtichNav').siblings('.cabin-swtichCont').find('.item');
			$this.addClass('active').siblings('.active').removeClass('active');
			$swtichContItems.eq(index).addClass('item-show').siblings().removeClass('item-show');
			experience.CabinInit();
		});
	}
	experience.WindowResize = function(){
		$(window).resize(function(event){
			experience.CabinInit();
		});
	}
	//状态设置
	experience.SetState= function(role,data){
		var dataRole = '';
		switch(role){
			case 'experience':
			 	dataRole = 'experiences';
			  	break;
			case 'fleet':
			  	dataRole = 'fleets';
			  	break;
		  	case 'explorer':
		    	dataRole = 'explorers';
		    	break;
		}
		experience.isAjax = false;
		experience.switchData[role].page += 1;
		experience.switchData[role].isAjaxEnd = data[dataRole].length < 10 ? true : false;
		console.log('role-'+role,experience.switchData);
	}
	//滚动加载更多
	experience.ScrollLoadMoreInit = function(){
		$(window).on('scroll',function(){
			var scrollTop = $(window).scrollTop(),
				windowHeight = $(window).height(),
				documentHeight = $(document).height(),
				isScrollFooter = scrollTop + windowHeight == documentHeight;
			if(isScrollFooter && !experience.isAjax && experience.switchState !== 'food'){
				if(experience.switchState == 'experience' && !experience.switchData.experience.isAjaxEnd && !experience.filterIng){
					experience.isAjax = true;
					App.LoadMoreAjax(true,'.exp-list', 'experience', {
						experience_type_id:experience.experience_value,
						destination_type_id:experience.destination_value,
						paged:experience.switchData.experience.page},
					function(data){
						//console.log('experience-data',data);
						experience.SetState('experience',data);
						var expHtml = '',
							expData = data.experiences;
						for(i in expData){
							var item = expData[i],
								thumbnail = item.thumbnail ? item.thumbnail : '/webs/hurtigruten/assets/images/example/destination_detail_list_demo.jpg',
								item_tpl = '<li class="item">'+
												'<div class="img-box">'+
													'<a href="/experience/'+item.post_name+'" class="img-link zoom-box"><img src="'+thumbnail+'" alt=""></a>'+
													'<button class="btn btn-thumb" data-likeid="'+item.id+'" ><i class="iconfont icon-fabulous"></i></button>'+
												'</div>'+
												'<div class="text-area text-center">'+
												'<h3 class="item-title"><a href="/experience/'+item.post_name+'">'+item.title+'</a></h3>'+
													'<p class="excerpt">'+item.excerpt+'</p>'+
													'<p class="tags">'+
														'<span class="tag"><i class="iconfont icon-rili"></i>'+item.timespan+'</span>'+
														'<span class="tag"><i class="iconfont icon-clock"></i>'+item.duration+'</span>'+
													'</p>'+
													'<p class="text-center"><a href="/experience/'+item.post_name+'" class="link">了解详情</a></p>'+
												'</div>'+
											'</li>';
							expHtml += item_tpl;
						}
						$('.exp-list').append(expHtml);
					})
				}
				if(experience.switchState == 'fleet'  && !experience.switchData.fleet.isAjaxEnd ){
					experience.isAjax = true;
					App.LoadMoreAjax(true,'.cabin-list', 'fleet', {paged:experience.switchData.fleet.page}, function(data){
						//console.log('fleet-data',data);
						experience.SetState('fleet',data);
						var fleetHtml = '',
							fleetData = data.fleets;
						for(i in fleetData){
							var item = fleetData[i];
								room_intro = item.room_intro,
								room_introHtml = '',
								room_introNavs = '',
								room_introConts = '';
							if(room_intro.length>0){
								for(j in room_intro){
									var row = room_intro[j],
										navClass = j == 0 ? 'active' : '',
										contClass = j == 0 ? 'item-show' : '',
										room_img = row.room_img ? row.room_img : '/webs/hurtigruten/assets/images/example/cabin_demo.jpg';
									room_introNavs += '<span class="'+navClass+'">'+row.room_title+'</span>';
									var cont_tpl = 	'<li class="item '+contClass+' clear-float">'+
														// '<div class="float-right swiper-container cabin-swiper">'+
														//     '<div class="swiper-wrapper">'+
														//         '<div class="swiper-slide" style="background:url('+room_img+') no-repeat center center; background-size:cover;">'+
														//         	'<img src="'+room_img+'" alt="">'+
													 //        	'</div>'+
														//    '</div>'+
														//     '<div class="swiper-pagination"></div>'+
														// '</div>'+
												        '<div class="float-right cabin-img" style="background:url('+room_img+') no-repeat center center; background-size:cover;">'+
												        	'<img src="'+room_img+'" alt="">'+
											        	'</div>'+
														'<div class="float-right cabin-info">'+
															'<h3 class="item-title">'+row.room_title+'</h3>'+
															'<div class="item-detail">'+row.room_desc+'</div>'+
														'</div>'+
													'</li>';
									room_introConts += cont_tpl;
								}
								room_introHtml	= 	'<div class="cabin-swtichNav text-center">'+room_introNavs+'</div>'+
													'<ul class="cabin-class cabin-swtichCont">'+room_introConts+'</ul>';
							}
							var item_tpl =  '<div class="cabin-item">'+
												'<div class="cabin-header">'+
													'<h3 class="cabin-title text-center clear-float"><span><i class="iconfont icon-yinhao-zuo"></i><i>'+item.title+'</i><i class="iconfont icon-yinhao-you"></i></span></h3>'+
													'<div class="cabin-introduce text-center">'+item.cabin_intro+'</div>'+
												'</div>'+room_introHtml+
											'</div>';
							fleetHtml += item_tpl;
						}
						$('.cabin-list').append(fleetHtml);
						experience.CabinInit();
					})
				}
				if(experience.switchState == 'explorer'  && !experience.switchData.explorer.isAjaxEnd ){
					experience.isAjax = true;
					App.LoadMoreAjax(true,'.exp-list', 'explorer', {paged:experience.switchData.explorer.page}, function(data){
						//console.log('explorers-data',data);
						experience.SetState('explorer',data);
						var explorerHtml = '',
							explorerData = data.explorers;
						for(i in explorerData){
							var item = explorerData[i],
								thumbnail = item.thumbnail ? item.thumbnail : '/webs/hurtigruten/assets/images/example/tem_demo.jpg',
								item_tpl =  '<li class="team-item">'+
												'<div class="team-item-inner">'+
													'<div class="img-box">'+
														'<a class="zoom-box img-link com-tip-box team-item-trigger"'+
															'data-id="'+item.id+'"'+
															'data-likenum="'+item.post_like_count+'"'+
															'data-avatar="'+item.icon+'"'+
						 									'data-title="'+item.title+'"'+
						 									'data-enname="'+item.en_name+'"'+
						 									'data-tags="'+item.position+'"'+
						 									'data-detail="'+item.content+'">'+
															'<img src="'+item.icon+'" alt="">'+
															'<span class="com-tip-icon"><i class="iconfont icon-enlarge"></i></span>'+
														'</a>'+
														'<button class="btn btn-thumb" data-likeid="'+item.id+'"><i class="iconfont icon-fabulous"></i></button>'+
													'</div>'+
													'<div class="text-area">'+
														'<p class="zh-name">'+item.title+'</p>'+
														'<p class="en-name">'+item.en_name+'</p>'+
														'<p class="tags">'+item.position+'</p>'+
													'</div>'+
												'</div>'+
											'</li>';
							explorerHtml += item_tpl;
						}
						$('.team-list').append(explorerHtml);
					})
				}
			}
		});
	}
	//筛选数据
	experience.FilterInIt = function(){
		experience.filterIng = false;
		experience.destination_value = '';
		experience.experience_value = '';
		$("#filterBtn").click(function(event) {
			var $this = $(this),
				$Filter = $this.parents('.com-filter'),
				destination_value = $Filter.find('select[data-name=destination]').val(),
				experience_value = $Filter.find('select[data-name=experience]').val();
			if(destination_value !== experience.destination_value || experience_value !== experience.experience_value){
				experience.destination_value = destination_value;
				experience.experience_value = experience_value;
				$this.attr('disabled',true);
				experience.filterIng = true;
				$('.exp-list').html('');
				experience.switchData.experience.page = 1;
				App.LoadMoreAjax(true,'.exp-list', 'experience',{
					experience_type_id:experience.experience_value,
					destination_type_id:experience.destination_value,
					paged:experience.switchData.experience.page},
				function(data){
					console.log('filter-data',data);
					$this.removeAttr('disabled',true);
					experience.filterIng = false;
					experience.SetState('experience',data);
					var expHtml = '',
						expData = data.experiences;
					if(expData.length>0){
						for(i in expData){
							var item = expData[i],
								thumbnail = item.thumbnail ? item.thumbnail : '/webs/hurtigruten/assets/images/example/destination_detail_list_demo.jpg',
								item_tpl = '<li class="item">'+
												'<div class="img-box">'+
													'<a href="/experience/'+item.post_name+'" class="img-link zoom-box"><img src="'+thumbnail+'" alt=""></a>'+
													'<button class="btn btn-thumb" data-likeid="'+item.id+'" ><i class="iconfont icon-fabulous"></i></button>'+
												'</div>'+
												'<div class="text-area text-center">'+
													'<h3 class="item-title"><a href="/experience/'+item.post_name+'">'+item.title+'</a></h3>'+
													'<p class="excerpt">'+item.excerpt+'</p>'+
													'<p class="tags">'+
														'<span class="tag"><i class="iconfont icon-rili"></i>'+item.timespan+'</span>'+
														'<span class="tag"><i class="iconfont icon-clock"></i>'+item.duration+'</span>'+
													'</p>'+
													'<p class="text-center"><a href="/experience/'+item.post_name+'" class="link">了解详情</a></p>'+
												'</div>'+
											'</li>';
							expHtml += item_tpl;
						}
						$('.exp-list').html(expHtml);
						App.GiveThumbInit();
					}else{
						$('.exp-list').html('<p class="text-center" style="padding:2em; font-size:18px;">暂时没有数据，筛选其他看看！</p>');
					}
				})
			}
		});
	}();
	experience.Init = function() {
		experience.TeamDetailInit();
		// experience.CabinInit();
		experience.CabinSwitchInit();
		experience.WindowResize();
		$('.switch-nav .nav-item').click(function(){
			var $this = $(this),
				role = $this.data('role');
			experience.switchState = role;
			if(experience.switchState == 'food'){
				if(!experience.restaurantSwiperInit){
					experience.RestaurantSwiperInit();
				}
			}
			if(experience.switchState == 'fleet'){
				experience.CabinInit();
			}
		});
		experience.isAjax = false;
		experience.switchData = {};
		experience.switchState = 'experience';
		$('.switch-nav .nav-item').each(function(index, el) {
			var $this = $(this),
				role = $this.data('role');
			if(role!=='food'){
				experience.switchData[role] = {
					name:role,
					page:2,
					isAjaxEnd:false
				};
			}
			if(role=='fleet'){
				experience.CabinInit();
			}
		});
		console.log('experience.switchData',experience.switchData)
		//滚动加载
		experience.ScrollLoadMoreInit();
	}
}
var Experience = new Experience();
Experience.Init();